<template>
    <div id="">
        <ul>
            <li v-for="(num, index) in dataList">{{ num }}</li>
        </ul>

        <button @click="call">派发</button>
    </div>
</template>

 <script setup lang="ts">
import { reactive } from 'vue'

const obj = reactive({
    name: '阿夸',
    age: 12
})

type Props = {
    dataList: Array<Number>
}
// 通过defineProps接收父组件传的值
defineProps<Props>()

// withDefaults可以将defineProps作为第一个参数传进去，第二个参数设置默认值，如果父组件没有传就会使用默认值
// 该方法是ts独有的

// 通过defineEmits,绑定一个自定义事件
const emit = defineEmits(['pushobj'])
const call = () => {
    // 通过defineEmits的返回值去触发一个自定义事件并传入数据
    emit('pushobj', obj, 100)
}

// 可以在这里面定义要向父组件暴露的数据
// 父组件可以通过ref的方式直接拿到子组件暴露的数据
defineExpose({
    obj
})

</script>

<style lang="less" scoped>
</style>